<template>
  <div class="stepLine" :class="finished ? 'finished' : 'unfinished'">
    <div class="stepBox">
      <div class="line" :class="width">
        <div class="pie">
          {{ step }}
        </div>
      </div>
    </div>
    <div class="name">
      {{ name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'stepLine',
  props: {
    step: {
      require: String | Number,
      default: '1'
    },
    name: {
      require: String,
      default: '确认'
    },
    finished: {
      require: Boolean,
      default: false
    },
    width: {
      require: String,
      default: 'long'
    }
  }
}
</script>

<style lang="scss" scoped>
.stepLine {
  float: left;
  .stepBox {
    height: 20px;
    .long {
      width: 180px;
    }
    .short {
      width: 135px;
    }
    .line {
      height: 4px;
      position: relative;
      .pie {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        line-height: 20px;
        letter-spacing: 0px;
      }
    }
  }
  .name {
    height: 17px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 17px;
    letter-spacing: 0px;
  }
}
.unfinished {
  .line {
    background-color: #ebedf3;
  }
  .pie {
    background-color: #ebedf3;
    color: #8d99b0;
  }
  .name {
    color: #5f7196;
  }
}
.finished {
  .line {
    background-color: #304eec;
  }
  .pie {
    background-color: #304eec;
    color: #f6f7fb;
  }
  .name {
    color: #304eec;
  }
}
</style>
